<template>
  <!-- <a-form
    ref="resourceRef"
    :model="resourceForm"
    :label-col="{ style: { width: '120px' } }"
    class="w-560"
    :colon="false"
    :rules="resourceRules"
    name="resourceForm"
    :label-align="'left'"
  > -->
  <div>
    <div class="params-title"><span>训练参数</span><a-switch v-model:checked="checked" /></div>

    <a-form
      v-if="checked"
      ref="trainFormRef"
      class="w-560"
      :label-align="'left'"
      :label-col="{ style: { width: '120px' } }"
      :rules="trainEvaluateRules"
      :model="trainForm"
    >
      <a-form-item label="运行命令" name="runCommand">
        <a-input v-model:value="trainForm.runCommand" placeholder="请输入运行命令" />
      </a-form-item>
      <a-form-item label="运行参数" name="runParams">
        <a-space v-for="(param, index) in trainForm.runParams" :key="index" class="w-440" style="display: flex; gap: 12px" align="baseline">
          <a-form-item
            class="w-215"
            :name="['runParams', index, 'paramName']"
            :rules="{
              required: true,
              message: '请输入参数'
            }"
          >
            <a-input v-model:value="param.paramName" v-trim placeholder="请输入参数" />
          </a-form-item>
          <a-form-item
            class="w-215"
            :name="['runParams', index, 'paramValue']"
            :rules="{
              required: true,
              message: '请输入值'
            }"
          >
            <a-input v-model:value="param.paramValue" v-trim placeholder="请输入值" />
          </a-form-item>
          <MinusCircleOutlined v-if="param.canDelete" style="color: #cccdcf" title="删除" @click="removeParamInput(1, index)" />
        </a-space>
        <div class="w-440">
          <a-button type="dashed" block @click="addParam(0, 1)">
            <PlusOutlined />
            <span style="color: rgba(17, 22, 31, 0.75)">添加</span>
          </a-button>
        </div>
      </a-form-item>
      <a-form-item label="资源配置" :rules="[{ required: true }]">
        <div class="flex gap-24">
          <a-form-item name="gpu">
            <div class="flex justify-center items-center gap-6">
              <span>GPU:</span> <a-select v-model:value="trainForm.gpu" class="w-176" :options="GPU_OPTIONS" />
            </div>
          </a-form-item>
          <a-form-item name="cpuMemory">
            <div class="flex justify-center items-center gap-6">
              <span>CPU:</span>
              <a-select v-model:value="trainForm.cpuMemory" class="w-176" :options="CPU_OPTIONS" @change="cpuMemoryChange($event, 0)" />
            </div>
          </a-form-item>
        </div>
      </a-form-item>
    </a-form>

    <div class="params-title"><span>评估参数</span><a-switch v-model:checked="checked1" /></div>
    <a-form
      v-if="checked1"
      ref="evaluateFormRef"
      class="w-560"
      :label-align="'left'"
      :label-col="{ style: { width: '120px' } }"
      :model="evaluateForm"
      :rules="trainEvaluateRules"
    >
      <a-form-item label="运行命令" name="runCommand">
        <a-input v-model:value="evaluateForm.runCommand" placeholder="请输入运行命令" />
      </a-form-item>
      <a-form-item label="运行参数" name="runParams">
        <a-space
          v-for="(param, index) in evaluateForm.runParams"
          :key="index"
          class="w-440"
          style="display: flex; gap: 12px"
          align="baseline"
        >
          <a-form-item
            class="w-215"
            :name="['runParams', index, 'paramName']"
            :rules="{
              required: true,
              message: '请输入参数'
            }"
          >
            <a-input v-model:value="param.paramName" v-trim placeholder="请输入参数" />
          </a-form-item>
          <a-form-item
            class="w-215"
            :name="['runParams', index, 'paramValue']"
            :rules="{
              required: true,
              message: '请输入值'
            }"
          >
            <a-input v-model:value="param.paramValue" v-trim placeholder="请输入值" />
          </a-form-item>
          <MinusCircleOutlined v-if="param.canDelete" style="color: #cccdcf" title="删除" @click="removeParamInput(1, index)" />
        </a-space>
        <div class="w-440">
          <a-button type="dashed" block @click="addParam(1, 1)">
            <PlusOutlined />
            <span style="color: rgba(17, 22, 31, 0.75)">添加</span>
          </a-button>
        </div>
      </a-form-item>
      <a-form-item label="资源配置" :rules="[{ required: true }]">
        <div class="flex gap-24">
          <a-form-item name="gpu">
            <div class="flex justify-center items-center gap-6">
              <span>GPU:</span> <a-select v-model:value="evaluateForm.gpu" class="w-176" :options="GPU_OPTIONS" />
            </div>
          </a-form-item>
          <a-form-item name="cpuMemory">
            <div class="flex justify-center items-center gap-6">
              <span>CPU:</span>
              <a-select v-model:value="evaluateForm.cpuMemory" class="w-176" :options="CPU_OPTIONS" @change="cpuMemoryChange($event, 1)" />
            </div>
          </a-form-item>
        </div>
      </a-form-item>
    </a-form>

    <div class="params-title"><span>推理参数</span><a-switch v-model:checked="checked2" /></div>
    <a-form
      v-if="checked2"
      ref="forecastFromRef"
      class="w-560"
      :label-align="'left'"
      :label-col="{ style: { width: '120px' } }"
      :model="forecastFrom"
      :rules="forecastFromRules"
    >
      <a-form-item label="运行命令" name="runCommand">
        <a-input v-model:value="forecastFrom.runCommand" placeholder="请输入运行命令" />
      </a-form-item>
      <a-form-item label="运行参数" name="runParams">
        <a-space
          v-for="(param, index) in forecastFrom.runParams"
          :key="index"
          class="w-440"
          style="display: flex; gap: 12px"
          align="baseline"
        >
          <a-form-item
            class="w-215"
            :name="['runParams', index, 'paramName']"
            :rules="{
              required: true,
              message: '请输入参数'
            }"
          >
            <a-input v-model:value="param.paramName" v-trim placeholder="请输入参数" />
          </a-form-item>
          <a-form-item
            class="w-215"
            :name="['runParams', index, 'paramValue']"
            :rules="{
              required: true,
              message: '请输入值'
            }"
          >
            <a-input v-model:value="param.paramValue" v-trim placeholder="请输入值" />
          </a-form-item>
          <MinusCircleOutlined v-if="param.canDelete" style="color: #cccdcf" title="删除" @click="removeParamInput(1, index)" />
        </a-space>
        <div class="w-440">
          <a-button type="dashed" block @click="addParam(2, 1)">
            <PlusOutlined />
            <span style="color: rgba(17, 22, 31, 0.75)">添加</span>
          </a-button>
        </div>
      </a-form-item>
      <a-form-item label="请求方式" name="requestType">
        <a-select
          v-model:value="forecastFrom.requestType"
          class="w-440"
          :show-search="false"
          :options="REQUEST_TYPE_OPTIONS"
          placeholder="请选择标签"
          style="width: 100%"
          show-arrow
        />
      </a-form-item>

      <a-form-item label="输入参数" name="inputParams">
        <a-space
          v-for="(param, index) in forecastFrom.inputParams"
          :key="index"
          class="w-440"
          style="display: flex; gap: 12px"
          align="baseline"
        >
          <a-form-item
            class="w-215"
            :name="['inputParams', index, 'paramName']"
            :rules="{
              required: true,
              message: '请输入参数'
            }"
          >
            <a-input v-model:value="param.paramName" v-trim placeholder="请输入参数" />
          </a-form-item>
          <a-form-item
            class="w-215"
            :name="['inputParams', index, 'paramValue']"
            :rules="{
              required: true,
              message: '请输入值'
            }"
          >
            <a-input v-model:value="param.paramValue" v-trim placeholder="请输入值" />
          </a-form-item>
          <MinusCircleOutlined v-if="param.canDelete" style="color: #cccdcf" title="删除" @click="removeParamInput(2, index)" />
        </a-space>
        <div class="w-440">
          <a-button type="dashed" block @click="addParam(2, 2)">
            <PlusOutlined />
            <span style="color: rgba(17, 22, 31, 0.75)">添加</span>
          </a-button>
        </div>
      </a-form-item>

      <a-form-item label="输出参数" name="outputParams">
        <a-space
          v-for="(param, index) in forecastFrom.outputParams"
          :key="index"
          class="w-440"
          style="display: flex; gap: 12px"
          align="baseline"
        >
          <a-form-item
            class="w-215"
            :name="['outputParams', index, 'paramName']"
            :rules="{
              required: true,
              message: '请输入参数'
            }"
          >
            <a-input v-model:value="param.paramName" v-trim placeholder="请输入参数" />
          </a-form-item>
          <a-form-item
            class="w-215"
            :name="['outputParams', index, 'paramValue']"
            :rules="{
              required: true,
              message: '请输入值'
            }"
          >
            <a-input v-model:value="param.paramValue" v-trim placeholder="请输入值" />
          </a-form-item>
          <MinusCircleOutlined v-if="param.canDelete" style="color: #cccdcf" title="删除" @click="removeParamInput(3, index)" />
        </a-space>
        <div class="w-440">
          <a-button type="dashed" block @click="addParam(2, 3)">
            <PlusOutlined />
            <span style="color: rgba(17, 22, 31, 0.75)">添加</span>
          </a-button>
        </div>
      </a-form-item>

      <a-form-item label="资源配置" :rules="[{ required: true }]">
        <div class="flex gap-24">
          <a-form-item name="gpu">
            <div class="flex justify-center items-center gap-6">
              <span>GPU:</span> <a-select v-model:value="forecastFrom.gpu" class="w-176" :width="180" :options="GPU_OPTIONS" />
            </div>
          </a-form-item>
          <a-form-item name="cpuMemory">
            <div class="flex justify-center items-center gap-6">
              <span>CPU:</span>
              <a-select v-model:value="forecastFrom.cpuMemory" class="w-176" :options="CPU_OPTIONS" @change="cpuMemoryChange($event, 2)" />
            </div>
          </a-form-item>
        </div>
      </a-form-item>
    </a-form>
  </div>
  <!-- </a-form> -->
</template>

<script lang="ts" setup>
  import type { Rule } from 'ant-design-vue/es/form'
  import { SelectValue } from 'ant-design-vue/es/select'
  import { ref } from 'vue'

  import { CPU_OPTIONS, GPU_OPTIONS, REQUEST_TYPE_OPTIONS } from '../../options.ts'
  const checked = ref(true)
  const checked1 = ref(true)
  const checked2 = ref(true)

  //   const resourceRules: Record<string, Rule[]> = {
  //     gpu: [{ required: true, message: '请选择GPU' }],
  //     cpuMemory: [{ required: true, message: '请选择CPU' }]
  //   }

  const trainEvaluateRules: Record<string, Rule[]> = {
    runCommand: [{ required: true, message: '请输入运行命令' }],
    gpu: [{ required: true, message: '请选择GPU' }],
    cpuMemory: [{ required: true, message: '请选择CPU' }]
  }
  const forecastFromRules: Record<string, Rule[]> = {
    runCommand: [{ required: true, message: '请输入运行命令' }],
    requestType: [{ required: true, message: '请选择请求方式' }],
    inputParams: [{ required: true, message: '请输入输入参数' }],
    outputParams: [{ required: true, message: '请输入输出参数' }],
    gpu: [{ required: true, message: '请选择GPU' }],
    cpuMemory: [{ required: true, message: '请选择CPU' }]
  }
  const trainForm = ref({
    type: 0, // 训练
    runCommand: '',
    runParams: [{ paramName: '', paramValue: '', canDelete: false }],
    gpu: 0,
    cpuMemory: '1-2',
    cpu: 1,
    memory: 2
  })

  const evaluateForm = ref({
    type: 1, // 评估
    runCommand: '',
    runParams: [{ paramName: '', paramValue: '', canDelete: false }],
    gpu: 0,
    cpuMemory: '1-2',
    cpu: 1,
    memory: 2
  })

  const forecastFrom = ref({
    type: 2, // 预测
    runCommand: '',
    runParams: [{ paramName: '', paramValue: '', canDelete: false }],
    requestType: undefined,
    inputParams: [{ paramName: '', paramValue: '', canDelete: false }],
    outputParams: [{ paramName: '', paramValue: '', canDelete: false }],
    gpu: 0,
    cpuMemory: '1-2',
    cpu: 1,
    memory: 2
  })

  const cpuMemoryChange = (val: string | SelectValue, formType: 0 | 1 | 2) => {
    if (typeof val !== 'string' && !val.includes('-')) {
      return
    }
    let cpuVal = Number(val.split('-')[0])
    let memoryVal = Number(val.split('-')[1])
    if (formType === 0) {
      trainForm.value.cpu = cpuVal
      trainForm.value.memory = memoryVal
      return
    }
    if (formType === 1) {
      evaluateForm.value.cpu = cpuVal
      evaluateForm.value.memory = memoryVal
      return
    }
    if (formType === 2) {
      forecastFrom.value.cpu = cpuVal
      forecastFrom.value.memory = memoryVal
    }
  }

  // 增加运行参数
  const addParam = (formType: 0 | 1 | 2, type: 1 | 2 | 3) => {
    let pushData = {
      paramName: '',
      paramValue: '',
      canDelete: true
    }
    // 训练/评估只有运行命令
    if (formType === 0 || formType === 1) {
      if (type === 1) {
        trainForm.value.runParams.push(pushData)
      }
      return
    }

    // 推理参数动态表单
    if (type === 1) {
      forecastFrom.value.runParams.push(pushData)
      return
    }
    if (type === 2) {
      forecastFrom.value.inputParams.push(pushData)
      return
    }
    if (type === 3) {
      forecastFrom.value.outputParams.push(pushData)
    }
  }
</script>

<style lang="less" scoped>
  .params-title {
    .font16b();

    display: flex;
    gap: 8px;
    margin-bottom: 18px;
  }

  .w-176 {
    width: 176px;
  }
</style>
